<template>
  <div>
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" />
      <van-search
        class="search-box"
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        :show-action="true"
        @click="gosearch"
      >
        <template #action>
          <div>搜索</div>
        </template>
      </van-search>
    </div>

    <h5>
      最近搜索
      <van-icon name="delete" />
    </h5>
    <h5>热门搜索</h5>
   <div class="tag-box">
     <van-tag
    class="tag"
      plain
      type="primary"
      color="gray"
      text-color="gray"
      size="large"
      v-for="(item, index) in Pro"
      :key="index"
      >{{ item.keyword }}</van-tag
    >
   </div>
  </div>
</template>

<script>
export default {
  name: "SearchPro",
  data() {
    return {
      keyword: "",
      Pro: [],
    };
  },
  created() {
    this.$server.get("/api/pro/hotword").then((res) => {
      this.Pro = res.data.data;
    });
  },
  methods: {
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.head {
  height: 54px;
  border-bottom: 1px solid #ededed;
  text-align: center;
  line-height: 55px;
}
.arrow-left {
  float: left;
  margin: 1rem;
  color: blue;
  margin-top: 1.125rem;
}
h5,.tag-box {
  margin: 20px 20px;
}
.tag{
  margin: 5px 5px;
}
</style>
